 // 默认加载列表
 let id //设置id为
 const tbody = document.querySelector('tbody')
 renderList = async() => {
     try {
         const res = await axios({
             url: '/student/list'
         })
         console.log(res.data.data);
         const data = res.data.data
         tbody.innerHTML = data.map(item =>
             `<tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province+item.city+item.county}</td>
        <td >
        <button type="button" class="btn btn-primary btn-sm" data-id="${item.id}">修改</button>
        <button type="button" class="btn btn-danger btn-sm" data-id="${item.id}">删除</button>
        </td>
  </tr> `).join('')
     } catch (error) {
         console.dir(error)
     }

 }
 renderList()

 // 省市区三级联动
 const ps = document.querySelector('[name=province]')
 const cs = document.querySelector('[name=city]')
 const as = document.querySelector('[name=county]')
 initCity = async() => {
     // 获取所有的省份并渲染
     const pRes = await axios({
         url: "/geo/province"
     })
     console.log(pRes.data);
     ps.innerHTML = "<option selected=''  value=''>--省--</option>" + pRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')
         // 获取所有的城市并渲染
     ps.addEventListener('change', async() => {
             cs.value = ''
             as.value = ''
             try {
                 const cRes = await axios({
                     url: "/geo/city",
                     params: {
                         pname: ps.value
                     }
                 })
                 cs.innerHTML = "<option selected=''  value=''>--市--</option>" + cRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')
             } catch (error) {
                 console.dir(error);
             }
         })
         // 获取所有的地区并渲染
     cs.addEventListener('change', async() => {
         as.value = ''
         try {
             const aRes = await axios({
                 url: "/geo/county",
                 params: {
                     pname: ps.value,
                     cname: cs.value
                 }
             })
             as.innerHTML = "<option selected=''  value=''>--区/县--</option>" + aRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')
         } catch (error) {
             console.dir(error);
         }
     })
 }
 initCity()

 // 添加功能实现
 const form = document.querySelector('.add-form')
 document.querySelector('.btnAddStu').addEventListener('click', async() => {
         form.reset()
         $('#addModal').modal('show')
     })
     // 点击按钮提交数据
 const submit = document.querySelector('.btnAddStudent')
 submit.addEventListener('click', async(e) => {
         e.preventDefault()
         const data = serialize(form, {
             hash: true,
             empty: true
         })
         form.reset()
         $('#addModal').modal('hide')
             // 根据id是否存在判断是修改还是添加
         if (id) {
             data.id = id
             console.log(data);
             try {
                 await axios({
                     url: "/student/update",
                     method: 'put',
                     data
                 })
                 renderList()
             } catch (error) {
                 console.dir(error);
             }

         } else {
             try {
                 const res = await axios({
                     url: "/student/add",
                     method: "POST",
                     data
                 })
                 renderList()
             } catch (error) {
                 console.dir(error);
             }
         }
     })
     //删除和修改功能
 tbody.addEventListener('click', async e => {
     id = +e.target.dataset.id
     if (e.target.classList.contains('btn-danger')) {
         try {
             const res = await axios({
                 url: '/student/delete',
                 method: "DELETE",
                 params: {
                     id
                 }
             })
             renderList()
         } catch (error) {
             console.log(error.response.data.message);
         }
     }
     if (e.target.classList.contains('btn-primary')) {
         try {
             const res = await axios({
                 url: '/student/one',

                 params: {
                     id
                 }
             })
             const data = res.data.data
                 // 获取所有的省列表
             const pRes = await axios({
                 url: "/geo/province"
             })
             console.log(pRes.data);
             ps.innerHTML = "<option selected=''  value=''>--省--</option>" + pRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')
                 // 获取所有的城市列表
             try {
                 const cRes = await axios({
                     url: "/geo/city",
                     params: {
                         pname: data.province
                     }
                 })
                 cs.innerHTML = "<option selected=''  value=''>--市--</option>" + cRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')
             } catch (error) {
                 console.dir(error);
             }
             // 获取所有的地区/县列表
             try {
                 const aRes = await axios({
                     url: "/geo/county",
                     params: {
                         pname: data.province,
                         cname: data.city
                     }
                 })
                 as.innerHTML = "<option selected=''  value=''>--区/县--</option>" + aRes.data.map(item => `<option  value='${item}'>--${item}--</option>`).join('')
             } catch (error) {
                 console.dir(error);
             }

             // 遍历数据的键，数据回显
             Object.keys(data).forEach(async(k) => {
                     if (k === 'sex') {
                         const sexs = document.querySelectorAll("[name='sex']")
                         data[k] === '男' ? sexs[0].checked = true : sexs[1].checked = true
                     }
                     let item = document.querySelector(`[name='${k}']`)
                     if (item) item.value = data[k]
                 })
                 // renderList()
             document.querySelector(".modal-title").innerHTML = '修改学员信息'
             submit.innerHTML = '确认编辑'
             $('#addModal').modal('show')
         } catch (error) {
             console.dir(error);
         }
     }
 })